<template>
  <div class="freeTour" ref="homePage">
    <v-search></v-search>

    <div class="center">
      <div>
        <div class="child-item" @click="Jumpbuy()">
          <div class="img-box">
            <img style="width: 100%;display: block;" src="https://resource.sz-trip.com/uploads/20190802/8f29add6eec53173db44a3f7110f5304.jpg" />
            <img class="myd" src="@/assets/freetour/myd.png" />
            <div class="tip-bg">
              <div class="price">
                <van-tag color="#46d0ca">￥<span style="font-size: 1rem;">111</span>起</van-tag>
              </div>
              <div class="tip-text">
                <van-icon style="margin-left: 0.9375rem;" size="18px" name="friends-o" />
                <span>8.0万人出游</span>
                <van-icon style="margin-left: 0.9375rem;" size="18px" name="good-job-o" />
                <span>100%满意</span>
              </div>
            </div>
          </div>
          <p class="title">网师园夜游实景演艺《游园今梦》</p>
          <p class="intro">【演出时间】19:30-22:00 ，凭订单号至网师园正门售票处换票</p>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
  import search from '../search.vue'
  export default {
    components: {

      "v-search": search,
    },
    data() {
      return {
        clintHeigth: '', //获取页面高度

      }
    },

    mounted() {
      this.clientHeight = `${document.documentElement.clientHeight}` //document.body.clientWidth;
      // console.log(this.clientHeight);
      // let dd = 100;
      this.$refs.homePage.style.minHeight = this.clientHeight + 'px';
    },
    methods:{
      Jumpbuy() {
        this.$router.push({
          path: "/Home/productDetail",

        })
      },
    }
  }
</script>

<style lang="scss">
  .freeTour {
    .child-item {
      margin-bottom: 0.625rem;
      background: #FFFFFF;

      .img-box {
        position: relative;

        .myd {
          position: absolute;
          right: 1.75rem;
          top: 0;
          width: 2.625rem;
        }

        .tip-bg {
          display: flex;
          // justify-content: space-between;
          align-items: center;
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          height: 2.25rem;
          font-size: 0.625rem;
          justify-content: space-between;
          background: linear-gradient(rgba(59, 84, 62, 0), rgba(59, 84, 62, .82));
          color: #FFFFFF;

          .price {
            height: 1.5rem;
            margin-left: 0.75rem;
          }

          .tip-text {
            margin-right: 0.625rem;
            display: flex;
            align-items: center;
            font-size: 0.75rem;
          }
        }
      }

      .title {
        margin: 0.625rem;
        color: #3e3e3e;
        font-size: 0.8125rem;
        margin-bottom: 0.1875rem;
      }

      .intro {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 0 0.625rem;
        font-size: 0.625rem;
        color:#696969;
        padding-bottom: 0.625rem;
      }
    }
  }
</style>
